<template>
  <div style="min-height: 300px">
    <a-form :model="entity" :rules="rules" label-width="120px">
      <a-form-item label="工艺模板选择" field="mbid">
        <a-select v-model="entity.mbid" placeholder="Please select ..." allow-clear @change="mbchange()">
          <a-option value="1">标准工艺</a-option>
          <a-option value="2">来料加工标准工艺</a-option>
          <a-option value="3">来料加工快锻工艺</a-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div>
      <h4 style="color: #f60000">只可添加产品类型的工序</h4>
      <a-space>
        <a-button type="primary" size="small" @click="addGongXu('下料')"><template #icon><icon-plus-circle /></template>下料</a-button>
        <a-button type="primary" size="small" @click="addGongXu('加热')"><template #icon><icon-plus-circle /></template>加热</a-button>
        <a-button type="primary" size="small" @click="addGongXu('快锻')"><template #icon><icon-plus-circle /></template>快锻</a-button>
        <a-button type="primary" size="small" @click="addGongXu('精锻')"><template #icon><icon-plus-circle /></template>精锻</a-button>
        <a-button type="primary" size="small" @click="addGongXu('热处理')"><template #icon><icon-plus-circle /></template>热处理</a-button>
        <a-button type="primary" size="small" @click="addGongXu('机加工')"><template #icon><icon-plus-circle /></template>机加工</a-button>
      </a-space>
    </div>
    <br />
    <a-steps type="arrow" :current="100">
      <a-step v-for="(step,index) in entity.stepList"  :key="step">{{step}}
        <template #description>
          <a-checkbox value="1">是否外协</a-checkbox>
        </template>
      </a-step>
    </a-steps>
    <br />
    <div>
      <a-button type="primary" status="danger" size="small"  @click="refreshGy">重置工艺路线</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, defineProps, defineEmits, nextTick } from "vue";

const emit = defineEmits(['update:modelValue'])
let props = defineProps({
  modelValue : {type : Boolean, default: true},
  entityId : {type : Number, default: 0}
})
let entity = reactive({
  id : props.entityId,
  mbid:'',
  stepList:[],
})
const rules = reactive({

})
const mbchange = (option)=>{
  entity.stepList = ["下料", "加热", "快锻", "精锻", "热处理", "机加工"]
}
const addGongXu = (stepName)=>{
  entity.stepList.push(stepName)
}
const refreshGy = ()=>{
  entity.stepList = [];
}
onMounted(()=>{
  nextTick(()=>{
  })
})
</script>

<style scoped>

</style>
